<template>
  <div class="workshop-chart common-tabs-wrapper">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="车间总览1" name="first">
        <div
          class="arrow arrow-left"
          ref="arrowLeft"
          @click="pageMove('left')"
        ></div>
        <div class="platform" ref="platform">
          <!-- 络筒 -->
          <LuoTong />
          <!-- 细纱1 -->
          <XiSha1 />
          <!-- 细纱2 -->
          <XiSha2 />
          <!-- 粗纱2 -->
          <CuSha />

          <!-- 并条 -->
          <JingTiao />

          <!-- 梳棉 -->
          <ShuMian />
          <!-- 清花 -->
          <QingHua />
        </div>
        <div
          class="arrow arrow-right"
          ref="arrowLeft"
          @click="pageMove('right')"
        ></div>
        <Legend />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Legend from './components/legend';
// ===========================
import XiSha1 from './components/workshop/XiSha1';
import XiSha2 from './components/workshop/XiSha2';
import CuSha from './components/workshop/CuSha';
import JingTiao from './components/workshop/JingTiao';
import ShuMian from './components/workshop/ShuMian';
import LuoTong from './components/workshop/LuoTong';
import QingHua from './components/workshop/QingHua';
//============================
export default {
  components: {
    // ===========================
    XiSha1,
    XiSha2,
    CuSha,
    JingTiao,
    ShuMian,
    LuoTong,
    QingHua,
    Legend
  },
  data() {
    return {
      activeName: 'first',
      // 一级轮训定时器
      timer: '',
      // 二级轮询定时器
      secXiShaTimer: '',
      secTxcsomlTimer: '',
      secCuShaJiTimer: '',
      secBingTiaoTimer: '',
      secShuMianJiTimer: '',
      secShuMianJiATimer: '',
      secLuoTongTimer: '',
      secLuoTongTimerA: '',
      secDuoCangTimer: '',
      secZhuaMianTimer: '',
      secKaiMianTimer: ''
    };
  },
  created() {
    this.clickButton();
  },
  beforeDestroy() {
    this.closeParentHandle();
    clearInterval(this.timer);
  },
  methods: {
    pageMove(type) {
      let left = this.$refs.platform.scrollLeft;
      let move = type == 'left' ? left - 80 : left + 80;
      this.$refs.platform.scroll({
        left: move,
        behavior: 'smooth'
      });
    },
    clickButton() {
      this.$store.commit('workshop/removeAllNewest');
      // 获取细纱分组数据
      this.$store.dispatch('workshop/actXiShaGroup');
      // // 获取并条分组数据
      this.$store.dispatch('workshop/actBingTiaoGroup');
      // // 获取梳棉机分组数据
      this.$store.dispatch('workshop/actShuMianJiGroup');
      // // 获取太行粗纱欧姆龙分组数据
      this.$store.dispatch('workshop/actTxcsomlGroup');
      // // 获取络筒分组数据
      this.$store.dispatch('workshop/actLuoTongGroup');
      // // 获取抓棉分组数据
      this.$store.dispatch('workshop/actZhuaMianGroup');
      // // 获取多仓分组数据
      this.$store.dispatch('workshop/actDuoCangGroup');
      // // 获取开棉机分组数据
      this.$store.dispatch('workshop/actKaiMianGroup');
      this.timer = setInterval(() => {
        // 获取细纱分组数据
        this.$store.dispatch('workshop/actXiShaGroup');
        // // 获取并条分组数据
        this.$store.dispatch('workshop/actBingTiaoGroup');
        // // 获取梳棉机分组数据
        this.$store.dispatch('workshop/actShuMianJiGroup');
        // // 获取太行粗纱欧姆龙分组数据
        this.$store.dispatch('workshop/actTxcsomlGroup');
        // // 获取络筒分组数据
        this.$store.dispatch('workshop/actLuoTongGroup');
        // // 获取抓棉分组数据
        this.$store.dispatch('workshop/actZhuaMianGroup');
        // // 获取多仓分组数据
        this.$store.dispatch('workshop/actDuoCangGroup');
        // // 获取开棉机分组数据
        this.$store.dispatch('workshop/actKaiMianGroup');
      }, 1000 * 60);
    },
    /**
     * 获取实时数据
     * */
    getInfoByDevSn(type, devSn) {
      const time = 1000 * 60;
      //关闭一级查询
      // clearInterval(this.timer);
      switch (type) {
        case 'XISHA':
          // 获取细纱实时数据
          this.$store.dispatch('workshop/actXiShaNewest', { devSn });
          this.secXiShaTimer = setInterval(() => {
            this.$store.dispatch('workshop/actXiShaNewest', { devSn });
          }, time);
          break;
        case 'BINGTIAO':
          // 获取并条实时数据
          this.$store.dispatch('workshop/actBingTiaoNewest', { devSn });
          this.secBingTiaoTimer = setInterval(() => {
            this.$store.dispatch('workshop/actBingTiaoNewest', { devSn });
          }, time);
          break;
        case 'SHUMIANJI': // 梳棉机，梳棉机A都在这处理
          // 获取梳棉机实时数据
          if (devSn <= 16) {
            // 梳棉机
            this.$store.dispatch('workshop/actShuMianJiNewest', { devSn });
            this.secShuMianJiTimer = setInterval(() => {
              this.$store.dispatch('workshop/actShuMianJiNewest', { devSn });
            }, time);
          } else {
            // 梳棉机A
            this.$store.dispatch('workshop/actShuMianJiANewest', { devSn });
            this.secShuMianJiATimer = setInterval(() => {
              this.$store.dispatch('workshop/actShuMianJiANewest', { devSn });
            }, time);
          }
          break;
        case 'TXCSOML':
          // 获取太行粗纱欧姆龙实时数据
          this.$store.dispatch('workshop/actTxcsomlNewest', { devSn });
          this.secTxcsomlTimer = setInterval(() => {
            this.$store.dispatch('workshop/actTxcsomlNewest', { devSn });
          }, time);
          break;
        case 'CUSHA':
          // 获取新粗纱机器实时数据
          this.$store.dispatch('workshop/actCuShaJiNewest', { devSn });
          this.secCuShaJiTimer = setInterval(() => {
            this.$store.dispatch('workshop/actCuShaJiNewest', { devSn });
          }, time);
          break;
        case 'LUOTONG':
          // 获取络筒实时数据
          this.$store.dispatch('workshop/actLuoTongNewest', { devSn });
          this.secLuoTongTimer = setInterval(() => {
            this.$store.dispatch('workshop/actLuoTongNewest', { devSn });
          }, time);
          // 获取络筒分组数据
          this.$store.dispatch('workshop/actLuoTongGroup1', { devSn });
          this.secLuoTongTimerA = setInterval(() => {
            this.$store.dispatch('workshop/actLuoTongGroup1', { devSn });
          }, time);
          break;
        case 'DUOCANG':
          // 获取络筒实时数据
          this.$store.dispatch('workshop/actDuoCangNewest', { devSn });
          this.secDuoCangTimer = setInterval(() => {
            this.$store.dispatch('workshop/actDuoCangNewest', { devSn });
          }, time);
          break;
        case 'ZHUAMIAN':
          // 获取络筒实时数据
          this.$store.dispatch('workshop/actZhuaMianNewest', { devSn });
          this.secZhuaMianTimer = setInterval(() => {
            this.$store.dispatch('workshop/actZhuaMianNewest', { devSn });
          }, time);
          break;
        case 'KAIMIAN':
          // 获取络筒实时数据
          this.$store.dispatch('workshop/actKaiMianNewest', { devSn });
          this.secKaiMianTimer = setInterval(() => {
            this.$store.dispatch('workshop/actKaiMianNewest', { devSn });
          }, time);
          break;
        case 'DONGLI':
          // 获取络筒实时数据
          this.$store.dispatch('workshop/actDongLiNewest', devSn);
          // this.secDongLiTimer = setInterval(() => {
          //   this.$store.dispatch("actDongLiNewest", devSn);
          // }, time);
          break;
        default:
          break;
      }
    },
    /**
     * 关闭弹窗触发事件
     */
    closeParentHandle() {
      // console.log("关闭弹窗触发事件")
      // this.$message('关闭二级轮询');
      // 清除二级轮询
      clearInterval(this.secXiShaTimer);
      clearInterval(this.secBingTiaoTimer);
      clearInterval(this.secShuMianJiTimer);
      clearInterval(this.secShuMianJiATimer);
      clearInterval(this.secTxcsomlTimer);
      clearInterval(this.secLuoTongTimer);
      clearInterval(this.secLuoTongTimerA);
      clearInterval(this.secDuoCangTimer);
      clearInterval(this.secZhuaMianTimer);
      clearInterval(this.secKaiMianTimer);
      clearInterval(this.secCuShaJiTimer);
      // clearInterval(this.secDongLiTimer);
      // 开启一级轮询
      // this.clickButton();
    }
  }
};
</script>

<style lang="scss">
@import '~@/assets/css/workshop.scss';
</style>
